<template>
    <h1 class="text-center">欢迎来到 land管理系统</h1>
    <el-divider />
    <el-calendar />
    <el-divider />
    <el-button type="primary" @click="showChangePassordDialog">修改密码</el-button>


    <el-dialog v-model="changePassoredFormVisible" title="修改密码" width="300">
        <el-form :model="changePassoredEntity" ref="changePassoredForm" :rules="changePassoredFormRuleList">
            <el-form-item label="原密码" prop="password">
                <el-input v-model="changePassoredEntity.password" type="password" autocomplete="off" />
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
                <el-input v-model="changePassoredEntity.newPassword" type="password" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="changePassoredFormVisible = false">取消</el-button>
                <el-button type="primary" @click="submitChangePassword(changePassoredForm)">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import * as systemUserApi from "@/api/SystemUserApi";
import { ChangePassword } from "@/domain/entity/ChangePassword";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { reactive, ref } from "vue";

const changePassoredFormVisible = ref(false);
const changePassoredEntity: ChangePassword = reactive<ChangePassword>(new ChangePassword());
const changePassoredForm = ref<FormInstance>();

const changePassoredFormRuleList = reactive<FormRules>({
    password: [
        { required: true, message: '[username] 不可为空', trigger: 'blur' },
    ],
    newPassword: [
        { required: true, message: '[newPassword] 不可为空', trigger: 'blur' },
    ],
})


const showChangePassordDialog = () => {
    Object.assign(changePassoredEntity, new ChangePassword());
    changePassoredFormVisible.value = true;
};

const submitChangePassword = (formInstance: FormInstance | undefined) => {
    if (!formInstance) return;
    formInstance.validate((valid, fields) => {
        if (valid) {
            systemUserApi.requestChangePassowrd(changePassoredEntity).then(response => {
                changePassoredFormVisible.value = false;
                Object.assign(changePassoredEntity, new ChangePassword());
            });
        } else {
            ElMessage.warning("请填写必填项")
        }
    })
}

</script>

